<template>
  <div>
     <van-tabbar route v-model="active"
        active-color="#000"
        inactive-color="#969799"
      >
        <van-tabbar-item v-for="item in menu" :key="item.url" :to="item.url">
          <span>{{item.title}}</span>
          <template #icon="props">
            <img :src="props.active ? item.active : item.inactive"/>
          </template>
        </van-tabbar-item>
   
      </van-tabbar>
  </div>
</template>

<script>
import {Tabbar,TabbarItem} from 'vant'
  export default {
    name:'MainTabBar',
    components:{
      [Tabbar.name]:Tabbar,
      [TabbarItem.name]:TabbarItem
    },
    data(){
      return{
        active: 0,
        menu:[
          {
            'url':'/home',
            'title':'扫描答题',
            'active': require('@/assets/img/tabbar/nav_saomiaos.png'),
            'inactive': require('@/assets/img/tabbar/nav_saomiao.png')  
          },
          {
            'url':'/classroom',
            'title':'班级',
            'active':require('@/assets/img/tabbar/nav_banjis.png'),
            'inactive':require('@/assets/img/tabbar/nav_banji.png')
          },
          {
            'url':'/work',
            'title':'在线作业',
            'active': require('@/assets/img/tabbar/nav_zuoyes.png'),
            'inactive': require('@/assets/img/tabbar/nav_zuoye.png')
          },
          {
            'url':'/profile',
            'title':'我的',
            'active': require('@/assets/img/tabbar/nav_mes.png'),
            'inactive': require('@/assets/img/tabbar/nav_me.png')
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>